.archive {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
  .archive-content {
    position: relative;  
  }
  .post-archive {
    &::before {
      content: ' ';
      height: 100%;
      width: 1px;
      background-color: #d9d9d9;
      position: absolute;
      top: 0;
      left: -2.4em;
      z-index: -1;
    }
    .year {
      position: relative;
      margin-bottom: 30px;
      a {
        color: #34495e;
        font-weight: 700;
        font-size: 2em; 
      }
      .bullet {
        width: 1rem;
        height: 1rem;
        box-sizing: border-box;
        border-radius: 50%;
        background: #bbb;
        z-index: 1;
        position: absolute;
        left: -2.4em;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .post-item {
      margin-bottom: 20px;
      .post-date {
        padding: 5px;
        background-color: #42b983;
        color: #ffffff;
        border-radius: 5px;
      }
      .post-title {
        color: #555;
        text-decoration: underline;
        padding: 5px;
        transition: all 0.3s;
        &:hover {
          color: #42b983;
        }
      }
      .post-title::before {
        top: 10px;
        width: 18px;
        height: 18px;
        content: "📚";
        margin-right: 5px;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: 15px;
        line-height: 18px;
      }
    }
  }
}